<template>
  <view class="trip-card" @click="clickHandler">
    <image class="trip-card-img" mode="aspectFill" :src="getImgUrl(option.tmi_icon)"></image>

    <view class="pdv40 pdh20">
      <view class="c333 font32">{{ option.tmi_name }}</view>
      <view class="mgt10">
        <view class="flex align-center cell">
          <image class="icon icon2" src="@/static/icon/detail-dot.png"></image>
          <view class="c666 font26 h1">{{ time }}</view>
          <view class="mglauto btn c481 font28" v-if="pass">查看 </view>
          <view
            class="mglauto btn c481 font28"
            v-if="!pass && (option.isRegister || (!option.isRegister && option.tmi_is_open != 0))"
            @click.stop="
              () => {
                if (!option.isRegister) {
                  $u.route({
                    url: '/pages-mine/post/index',
                    params: {
                      mId: option.tmi_id,
                    },
                  });
                }
              }
            "
            >{{ option.isRegister ? "已报名" : "报名" }}</view
          >
        </view>
        <view class="flex align-center cell mgt10">
          <image class="icon icon3" src="@/static/icon/detail-map.png"></image>
          <view class="c666 font26 h1">{{ location }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import dayjs from "dayjs";
export default {
  props: {
    pass: {
      type: Boolean,
      default: false,
    },

    option: {
      type: Object,
      default: () => ({}),
    },
  },

  computed: {
    location() {
      const { tmi_prov_name, tmi_city_name, tmi_region_name, tmi_address } = this.option;
      return tmi_prov_name + tmi_city_name + tmi_region_name + tmi_address;
    },

    time() {
      const { tmi_start_time, tmi_end_time } = this.option;
      if (!tmi_start_time) return "";
      return dayjs(tmi_start_time).format("YYYY/MM/DD") + "-" + dayjs(tmi_end_time).format("MM/DD");
    },
  },

  methods: {
    clickHandler() {
      // if (this.pass) {
      //   this.$u.route("/pages-details/conference/pass");
      //   return;
      // }
      this.$u.route({
        url: "/pages-details/conference/index",
        params: {
          mId: this.option.tmi_id,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.trip-card {
  box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(72, 30, 193, 0.1);
  border-radius: 20rpx;
  background-color: white;

  &:not(:first-child) {
    margin-top: 40rpx;
  }

  &-img {
    width: 100%;
    height: 400rpx;
    font-size: 0px;
    display: flex;
    border-top-right-radius: 20rpx;
    border-top-left-radius: 20rpx;
  }
}
.cell {
  height: 56rpx;
  .btn {
    padding: 0 32rpx;
    height: 56rpx;
    line-height: 56rpx;
    background-color: rgba(#481ec1, 0.1);
    border-radius: 40rpx;
  }
}
.pdh20 {
  padding-top: 20rpx;
  padding-bottom: 20rpx;
}
.icon {
  margin-right: 20rpx;
}
.icon2 {
  width: 28rpx;
  height: 28rpx;
}

.icon3 {
  width: 26rpx;
  height: 32rpx;
}

.h1 {
  flex: 1;
  width: 0;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
</style>
